<template>
  <div class="timely-rate">
    <div class="search-header">
      <el-select
        v-model="selectBusinessDivisions"
        multiple
        filterable
        size="mini"
        placeholder="请选择"
        @change="selectChangeHandle"
      >
        <el-option
          v-for="item in businessDivisions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-checkbox v-model="queryParams.haveOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
      <!--      <header-select tree-type="dept" @selectDept="getDept" />-->
      <!--<el-date-picker
        v-model="dateRangeValue"
        size="mini"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dataChange"
      />-->
      <div class="oprate-btn">
        <el-button size="mini" type="primary" icon="el-icon-search" :loading="loading" @click="query">查询</el-button>
        <el-button size="mini" type="primary" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      :data="table"
      :span-method="objectSpanMethod"
      border
      size="mini"
      height="calc(100vh - 150px)"
    >
      <el-table-column
        prop="deptName"
        label="事业部"
        min-width="80"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.deptName.value }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="最新项目名称"
        min-width="80"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.projectName.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="buildingName" label="楼栋" align="center" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.buildingName.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="checkTableName" label="工序" align="center" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.checkTableName.value }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unitTypeName" label="验收对象" align="center" min-width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.unitTypeName.value }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="username" label="用户" align="center" min-width="60" />
      <el-table-column prop="roleName" label="角色" align="center" min-width="130" />
      <el-table-column prop="realComplete" label="实际完成数" align="center" min-width="100" />
      <el-table-column prop="total" label="总数" align="center" min-width="100" />
      <el-table-column prop="targetComplete" label="目标数" align="center" min-width="100" />
      <el-table-column prop="realCompleteRate" label="实际完成率" align="center" min-width="100" />
      <el-table-column prop="targetCompleteRate" label="目标完成率" align="center" min-width="100" />
    </el-table>
  </div>
</template>

<script>
import { getProcessCompleteRate, downloadProcessCompleteRate } from '@/api/statement/keyProcessCheck'
import { getBusinessDivision } from '@/api/common'
// import { parseTime } from '@/utils/common'
export default {
  name: 'ProcessCompleteRate',
  components: {
  },
  filters: {
    rate(val) {
      let rval = ''
      rval = (val * 100).toFixed(2)
      return rval + '%'
    }
  },
  data() {
    return {
      dateRangeValue: [],
      table: [],
      loading: false,
      fileLoading: false,
      /* queryParams: {
        beginDate: '',
        endDate: '',
        reportType: 1
      },*/
      queryParams: {
        fid: '',
        haveOld: 0
      },
      href: '',
      businessDivisions: [],
      selectBusinessDivisions: []
    }
  },
  created() {
    // const today = parseTime(new Date(), '{y}-{m}-{d}')
    // const preDate = parseTime(new Date().setFullYear((new Date().getFullYear() - 1)), '{y}-{m}-{d}')
    // this.queryParams.beginDate = preDate
    // this.queryParams.endDate = today
    // this.dateRangeValue = [preDate, today]
    // this.init()
    getBusinessDivision().then(res => {
      this.businessDivisions = []
      if (res && res.code === 200) {
        this.businessDivisions = res.data
      }
    })
  },
  methods: {
    selectChangeHandle(val = []) {
      this.queryParams.deptId = ''
      if (val.length > 0) {
        this.queryParams.deptId = val.join(',')
      }
    },
    getDept(dept) {
      this.queryParams.fid = dept.id
      this.query()
    },
    query() {
      if (!this.queryParams.deptId) {
        this.$message.warning('请选择事业部')
        return
      }
      this.loading = true
      this.table = []
      getProcessCompleteRate(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.table = response.data
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    // 下载文件
    downloadFile() {
      this.fileLoading = true
      downloadProcessCompleteRate(this.queryParams).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同关键工序执行完成率统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    dataChange(val) {
      console.log(val)
      this.queryParams.beginDate = val[0]
      this.queryParams.endDate = val[1]
      this.init()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const cellData = row[column.property]
      if (cellData instanceof Object) {
        return {
          rowspan: cellData.rowspan,
          colspan: 1
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    padding: 0 20px;
    .search-header{
      margin: 10px 0;
      display: flex;
      .oprate-btn {
        display: inline-block;
        margin-left: 50px;
      }
    }
    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
